<template>
  <div>
    <input v-model="firName" /><br />
    <input v-model="secName" /><br />
    <input v-model="newName" /><br />
    <br />
    <span>{{ name }}</span>
    <br />
    <span>{{ latestName }}</span>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
const firName = ref<string>("");
const secName = ref<string>("");

// 写法1
const name = computed(() => {
  return firName.value + "-----" + secName.value;
});

// 写法2
const newName = ref<string>("");
const latestName = computed({
  get() {
    return firName.value + "===>" + newName.value;
  },
  set() {
    firName.value + newName.value;
  },
});
</script>

<style scoped></style>
